<template>
  <div class="">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="竣工检验" name="first" disabled="ture"></el-tab-pane>
      <el-tab-pane label="维修中" name="second">
        <template>
          <el-table :data="pageInfo.list" style="width: 100%" border>
            <el-table-column prop="date" label="单据序号" width="150">
              <template slot-scope="temp">
                {{ temp.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="serviceType" label="单据类型" width="180">
            </el-table-column>
            <el-table-column
              prop="servicestatename"
              label="单据状态"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="username" label="客户名称">
            </el-table-column>
            <el-table-column prop="ulicense" label="车牌号"> </el-table-column>
            <el-table-column prop="userphone" label="手机号">
            </el-table-column>
            <el-table-column
              prop="repairbilldate"
              label="开单时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="repairbilldated"
              label="预计完工"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column prop="receptionnote" label="接待备注">
            </el-table-column>
            <el-table-column prop="repairbillno" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="wg(scope.row.repairbillno)"
                  >维修完成</el-button
                >
              </template>
            </el-table-column>
          </el-table>
         <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-pagination
                layout="prev, pager, next"
                :background="true"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </template>
      </el-tab-pane>
      <el-tab-pane label="待返工" name="last">
        <template>
          <el-table :data="pageInfo.list" style="width: 100%" border>
            <el-table-column prop="date" label="单据序号" width="150">
              <template slot-scope="temp">
                {{ temp.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="serviceType" label="单据类型" width="180">
            </el-table-column>
            <el-table-column
              prop="servicestatename"
              label="单据状态"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="username" label="客户名称">
            </el-table-column>
            <el-table-column prop="ulicense" label="车牌号"> </el-table-column>
            <el-table-column prop="userphone" label="手机号">
            </el-table-column>
            <el-table-column
              prop="repairbilldate"
              label="开单时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="repairbilldated"
              label="预计完工"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column prop="receptionnote" label="接待备注">
            </el-table-column>
            <el-table-column prop="repairbillno" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="rework(scope.row.repairbillno)"
                  >返工维修</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-pagination
                layout="prev, pager, next"
                :background="true"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
      </el-tab-pane>
      <el-tab-pane label="待检验" name="foot">
        <template>
          <el-table :data="pageInfo.list" style="width: 100%" border>
            <el-table-column prop="date" label="单据序号" width="150">
              <template slot-scope="temp">
                {{ temp.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="serviceType" label="单据类型" width="180">
            </el-table-column>
            <el-table-column
              prop="servicestatename"
              label="单据状态"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="username" label="客户名称">
            </el-table-column>
            <el-table-column prop="ulicense" label="车牌号"> </el-table-column>
            <el-table-column prop="userphone" label="手机号">
            </el-table-column>
            <el-table-column
              prop="repairbilldate"
              label="开单时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="repairbilldated"
              label="预计完工"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column prop="receptionnote" label="接待备注">
            </el-table-column>
            <el-table-column prop="repairbillno" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="aaa(scope.row)"
                  >检验</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
              <el-pagination
                layout="prev, pager, next"
                :background="true"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
              >
              </el-pagination>
            </el-col>
          </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      pageInfo: {},
      activeName: "second",
      loading: true,
      dialogTableVisible: false,
      zt:2
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleCurrentChange(val) {
      this.goToPage(val, this.pageInfo.pageSize,this.zt);
    },
    goToPage(p, s, zt) {
      let _this = this;
      this.loading = true;
      this.$http
        .get("http://localhost:8080/api/rep/jg", {
          params: {
            p,
            s,
            zt,
          },
        })
        .then(function (resp) {
          _this.pageInfo = resp.data;
          _this.loading = false;
        });
    },
    aaa(obj) {
      console.log(obj);
      this.$router.push(`/index/order/${obj.repairbillno}/1`);
    },
    rework(id){
      this.$router.push(`/index/rework/${id}`);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 1) {
        this.zt = 2;
        this.goToPage(1, 3, this.zt);
      } else if (tab.index == 2) {
        this.zt = 6;
        this.goToPage(1, 3, this.zt);
      }else if (tab.index == 3) {  
        this.zt = 3;  
        this.goToPage(1, 3, this.zt);
      }
    },
    wg(id) {
      this.$router.push(`/index/order/${id}/0`);
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.goToPage(1, 3, this.zt);
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>